<!DOCTYPE html>
<html lang="en">
<head>
<title>How can choices in background and text color affect accessibility?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">How can choices in background and text color affect accessibility?</h1></div>
<div>



    <div class="step-instructions screensteps-textblock screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_6CE24937-A7C8-4CC0-BCCE-02EEB818C3D8" class="text-block-content">
    <p>Many users will have visual impediments that will require adequate contrast in the documents you are producing. The best way to help these users is to make sure that the contrast between the background and foreground has a ratio of 4.5:1 or higher. Leaving the defaults of the editor intact is best: black text on a white background, with a ratio of 21:1.</p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1" id="examples-of-contrast">
    <h2 class="step-title screensteps-heading">Examples of Contrast</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/001/310/617/original/e27d3cad-a10d-4703-a621-e3b21e177588.png" alt="" height="239" width="638">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_58C7BF26-266E-4C5D-AD9A-CBD4300B896C" class="text-block-content">
    <p>The image above contains examples of text with varying contrast ratios, and indicates whether the level of contrast would be adequate.</p>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="steps-to-change-foreground-and-background-colors">
    <h2 class="step-title screensteps-heading">Steps to Change Foreground and Background Colors</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/005/030/081/original/b14df98d-d3c6-48f5-9c8f-dba2933603b8.png" alt="" height="350" width="828">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_468FA0E1-F4BD-4D90-9174-02B85AF70826" class="text-block-content">
    <ol>
<li>If you need to edit the text color, click on the <strong>Text Color</strong> button, which resembles the letter A with an underline: <span style="text-decoration:underline;">A</span>.</li>
<li>To edit the background color of the text, which displays as if you had highlighted the text with a highlighter, click on the <strong>Background Color</strong> button to the right of the <strong>Text Color</strong> button. The <strong>Background Color</strong> button resembles a solid black box containing a white letter A.</li>
<li>Clicking on either of these buttons will display a <strong>Color Picker</strong> box from which you can select a color, such as <strong>Black</strong> or <strong>Red</strong>. <strong>Yellow</strong> is a <strong>Background Color </strong>commonly used to highlight text. Click on a color to select it.</li>
</ol>
  </div>
</div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="check-your-color-selection-for-adequate-contrast">
    <h2 class="step-title screensteps-heading">Check your color selection for adequate contrast.</h2>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/001/310/618/original/5371e40a-c439-43b4-af82-d19a765da418.png" alt="" height="977" width="734">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_0A572E4E-E9EA-4E38-B12C-1B7AC6BD3B92" class="text-block-content">
    <p>In most cases, the contrast will be obvious, but if you need to verify, take the following steps:</p>
<ol>
<li>Click on the <strong>More Colors...</strong> option in the <strong>Color Picker</strong>.</li>
<li>A <strong>Select color </strong>window will pop up. At the top right of the window, your selected color will be displayed under <em>Highlight</em>.</li>
<li>Under the box with your selected color, you'll see a six-digit <em>hex number</em>, starting with #. This is the number that allows the internet browser to display the selected color.</li>
<li>Record the the six-digit hex number for the color you have selected. Using an online tool, such as <a href="http://webaim.org/resources/contrastchecker/" target="_blank">WebAIM's Color Contrast Checker,</a> check how the <strong>Text Color</strong> you've selected contrasts with the background color behind your text (if you're selecting a <strong>Text Color</strong>) or how your selected <strong>Background Color</strong> contrasts with the color of your text. To use WebAIM's Color Contrast Checker, enter the hex number for your text and background colors into the boxes provided. The contrast checker will tell you the colors <em>Pass</em> if they have enough contrast.</li>
</ol>
  </div>
</div>
 
  </div>


</div>
</div></div>
</body>
</html>
